<template>
    <div class="home-map"
         id="map">
    </div>
</template>

<script>
    // 引用
    require('proj4')
    require('proj4leaflet')
    import { URLS_MAP } from '@/urls.js'
    import SubTooltip from './tooltip.vue'
    import Vue from 'vue'
    export default {
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        components: {
            SubTooltip
        },
        data() {
            this.oMap = null;//地图主体
            this.oGroup;//marker 组
            this.oMarker;//marker
            this.oPopup;
            return {
            }
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
            //接收页面事件
            this.$EventBus.$on('fViewReceive', this.fNotify)
        },
        beforeDestroy() {
            this.oMap.remove();
            this.$EventBus.$off('fViewReceive')
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            //*** 其他
            fPointClick(sCph) {
                console.log(1111)

            },
            fInitMap() {// 地图初始化 本地
                //百度
                const Crs = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs', {
                    resolutions: function () {
                        let level = 19
                        let res = [];
                        res[0] = Math.pow(2, 18);
                        for (let i = 1; i < level; i++) {
                            res[i] = Math.pow(2, (18 - i))
                        }
                        return res;
                    }(),
                    origin: [0, 0],
                    bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244])
                });

                this.oMap = L.map("map", {
                    minZoom: 1,
                    maxZoom: 18,
                    center: [39.608266, 109.781327],
                    zoom: 12,
                    zoomControl: false,
                    attributionControl: true,
                    crs: Crs
                });
                L.tileLayer('http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1', {
                    subdomains: '0123456789',
                    tms: true
                }).addTo(this.oMap);


                this.$nextTick(() => {
                    this.fCreateMark()
                })
            },
            fCreateCarMark(data) {//TODO
                if (this.oMarker) {
                    this.oMap.removeLayer(this.oMarker)
                }
                let oIcon = L.divIcon({
                    html: `<div class='map-marker-car'></div>`,
                    iconSize: [52, 52],
                    iconAnchor: [26, 0],
                })
                this.oMarker = L.marker([data.latitude, data.longitude], {
                    icon: oIcon,
                });
                this.oMarker.on('click', (e) => {
                    //e.target.openPopup();
                    //this.oMap.openPopup(this.oPopup)
                    //this.oPopup.openOn(this.oMap)
                    this.$EventBus.$emit('fMapReceive', 'showLayer', data.carnumcor)
                })
                let sDom = ` 
                <div class="map-car-box">
                    <div class="map-car-list">
                        <div class="map-car-title">车牌号：</div>
                        <div class="map-car-text">${data.carnumcor}</div>
                    </div>
                     <div class="map-car-list">
                        <div class="map-car-title">联系人：</div>
                        <div class="map-car-text">${data.realnameJsy}</div>
                    </div>
                     <div class="map-car-list">
                        <div class="map-car-title">联系电话：</div>
                        <div class="map-car-text">${data.lxdhJsy}</div>
                    </div>
                     <div class="map-car-list">
                        <div class="map-car-title">时间：</div>
                        <div class="map-car-text">${data.monitortime}</div>
                    </div>
                     <div class="map-car-list">
                        <div class="map-car-title">位置：</div>
                        <div class="map-car-text">${data.area}</div>
                    </div>
                </div>
                `
                this.oPopup = L.popup({
                    minWidth: 232,
                    closeButton: false,
                    closeOnClick: false,
                    autoClose: false,
                }).setContent(sDom)

                this.oMarker.bindPopup(this.oPopup)
                    .addTo(this.oMap)
                    .openPopup();
                this.oMap.panTo([data.latitude, data.longitude], 14);
            },
            fCreateMark() {
                this.$WIV.fRequest({
                    url: URLS_MAP.d_getWryQyList,
                }).then(({ data: aData }) => {
                    if (aData && aData.length) {
                        this.oGroup = new L.LayerGroup();
                        aData.forEach(oItem => {
                            let oIcon = {};
                            let oMarker;
                            let oPopup;
                            oIcon = L.divIcon({
                                html: `<div class="map-ponit">
                                      <div class="map-point-icon">企</div>
                                      <div class="map-point-count">${oItem.enterprisename}</div>
                                      </div>`,
                                iconSize: [136, 27],
                                iconAnchor: [68, 0],
                                data: JSON.stringify(oItem)
                            })
                            oMarker = L.marker([oItem.latitude, oItem.longitude], {
                                icon: oIcon,
                            });
                            let oMapView = Vue.component(`POPUP-${oMarker._leaflet_id}`, SubTooltip)
                            let oPopView = new oMapView({
                                propsData: {
                                    enterprisename: oItem.enterprisename,
                                    pscode: oItem.pscode
                                }
                            }).$mount()
                            oPopup = L.popup({
                                minWidth: 1089,
                            }).setContent(oPopView.$el)
                            oMarker.bindPopup(oPopup)
                            this.oGroup.addLayer(oMarker)
                        })
                        this.oGroup.addTo(this.oMap);
                    }
                })
            },
            //地图接受事件
            fNotify(sType, data) {
                switch (sType) {
                    case 'init':// 地图初始化
                        this.fInitMap();
                        break;
                    case 'showPoint'://点位
                        this.fCreateCarMark(data)
                        break;
                }
                console.log('map map.js notified:', sType, data);
            }
        },
        //**** template, render
    }
</script>

<style lang="less" rel="stylesheet" scoped>
    .home-map {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
</style>
